<template>
	<div id="temp">
		<div class="stuInfo">
			<div class="tit">
				<span>供应商详情</span>
				<span class="icon" @click="supplierEdit"></span>
			</div>
			<el-row>
				<el-col :span="8">
					<div>
						<el-col :span="10">
							<span class="left">编号：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{info.code}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">初次供应时间：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{info.time}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">合同号：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{info.contract}}</span>
						</el-col>
					</div>
				</el-col>
				<el-col :span="8">
					<div>
						<el-col :span="10">
							<span class="left">供应商名称：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{info.name}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">联系人：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{info.contact}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">地址：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{info.address}}</span>
						</el-col>
					</div>
				</el-col>
				<el-col :span="8">
					<div>
						<el-col :span="10">
							<span class="left">产品名称：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{info.product}}</span>
						</el-col>
					</div>
					<div>
						<el-col :span="10">
							<span class="left">联系方式：</span>
						</el-col>
						<el-col :span="14">
							<span class="right">{{info.tel}}</span>
						</el-col>
					</div>
				</el-col>
			</el-row>
		</div>
    <el-dialog title="编辑供应商信息" :visible.sync="pop" size="tiny">
      <el-form :model="ruleForm" :rules="rules" ref="form">
        <el-form-item label="编号" prop="code" :label-width="width">
          <el-col :span="span">
            <el-input v-model="ruleForm.code" size="small" placeholder="请输入编号"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="供方名称" prop="name" :label-width="width">
          <el-col :span="span">
            <el-input v-model="ruleForm.name" size="small" placeholder="请输入供方名称"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="产品名称" prop="product" :label-width="width">
          <el-col :span="span">
            <el-input v-model="ruleForm.product" size="small" placeholder="请输入产品名称"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="初次供应时间" prop="time" :label-width="width">
          <el-col :span="span">
            <el-date-picker type="date" size="small" placeholder="选择日期" v-model="ruleForm.time"
                            style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="联系人" prop="contact" :label-width="width">
          <el-col :span="span">
            <el-input v-model="ruleForm.contact" size="small" placeholder="请输入联系人"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="联系方式" prop="tel" :label-width="width">
          <el-col :span="span">
            <el-input v-model="ruleForm.tel" size="small" placeholder="请输入联系方式"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="地址" prop="address" :label-width="width">
          <el-col :span="span">
            <el-input v-model="ruleForm.address" size="small" placeholder="请输入地址"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="合同号" prop="contract" :label-width="width">
          <el-col :span="span">
            <el-input v-model="ruleForm.contract" size="small" placeholder="请输入合同号"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="pop = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
		<div class="record">
			<el-tabs type="border-card" active-name="supplierOtherBuy" @tab-click="tabChange">
				<el-tab-pane label="采购记录" name="supplierOtherBuy">
					<table class="tab-table">
						<thead>
							<tr>
								<th>
									<span class="icon add" @click="openAddBuy"></span>
								</th>
								<th>编号</th>
								<th>采购物品名称</th>
								<th>日期</th>
								<th>数量</th>
								<th>金额</th>
								<th>存放地点</th>
								<th>采购人</th>
								<th>备注</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item, index) in list">
								<td>
									<span class="icon edit" @click="editBuy(item.id)"></span>
									<span class="icon del" @click="delBuy(item.id)"></span>
								</td>
								<td>{{index+1}}</td>
								<td>{{item.name}}</td>
								<td>{{item.time}}</td>
								<td>{{item.num}}</td>
								<td>{{item.money}}</td>
								<td>{{item.location}}</td>
								<td>{{item.purchaser}}</td>
								<td>{{item.note}}</td>
							</tr>

						</tbody>
					</table>
				</el-tab-pane>
				<el-tab-pane label="使用记录" name="supplierOtherUse">
					<table class="tab-table">
						<thead>
							<tr>
								<th>
									<span class="icon add" @click="openAddUse"></span>
								</th>
								<th>编号</th>
								<th>名称</th>
								<th>日期</th>
								<th>数量</th>
								<th>金额</th>
								<th>使用人</th>
								<th>剩余库存</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item, index) in list" :key="item.id">
								<td>
									<span class="icon edit" @click="editUse(item.id)"></span>
									<span class="icon del" @click="delUse(item.id)"></span>
								</td>
								<td>{{index+1}}</td>
								<td>{{item.name}}</td>
								<td>{{item.time}}</td>
								<td>{{item.num}}</td>
								<td>{{item.money}}</td>
								<td>{{item.user}}</td>
								<td>{{item.stock}}</td>
							</tr>

						</tbody>
					</table>
				</el-tab-pane>
			</el-tabs>
      <el-dialog title="添加采购记录" :visible.sync="shoppingPop" size="tiny">
        <el-form :model="shopping" :rules="shoppingRules" ref="shopping">
          <el-form-item label="采购物品名称" prop="name" :label-width="width">
            <el-col :span="span">
              <el-input v-model="shopping.name" size="small" placeholder="请输入"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="日期" prop="time" :label-width="width">
            <el-col :span="span">
              <el-date-picker type="date" size="small" placeholder="选择日期" v-model="shopping.time"
                              style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="数量" prop="num" :label-width="width">
            <el-col :span="span">
              <el-input v-model="shopping.num" size="small"  placeholder="请输入"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="金额" prop="money" :label-width="width">
            <el-col :span="span">
              <el-input v-model="shopping.money" size="small" placeholder="请输入"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="存放地点" prop="location" :label-width="width">
            <el-col :span="span">
              <el-input v-model="shopping.location" size="small"  placeholder="请输入"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="采购人" prop="purchaser" :label-width="width">
            <el-col :span="span">
              <el-input v-model="shopping.purchaser" size="small" placeholder="请输入"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="备注" prop="note" :label-width="width" >
            <el-col :span="span">
              <el-input type="textarea" :rows="4" v-model="shopping.note" placeholder="备注"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="shoppingPop = false">取 消</el-button>
          <el-button type="primary" @click="shoppingSubmit">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="添加使用记录" :visible.sync="usePop" size="tiny">
        <el-form :model="useLog" :rules="useRules" ref="use">

          <el-form-item label="名称" prop="name" :label-width="width">
            <el-col :span="span">
              <el-input v-model="useLog.name" size="small" placeholder="请输入"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="日期" prop="time" :label-width="width">
            <el-col :span="span">
              <el-date-picker type="date" size="small" placeholder="选择日期" v-model="useLog.time"
                              style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="数量" prop="num" :label-width="width">
            <el-col :span="span">
              <el-input v-model="useLog.num" size="small" placeholder="请输入"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="使用人" prop="user" :label-width="width">
            <el-col :span="span">
              <el-input v-model="useLog.user" size="small" placeholder="请输入"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="剩余库存" prop="stock" :label-width="width">
            <el-col :span="span">
              <el-input v-model="useLog.stock" size="small" placeholder="请输入"></el-input>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="usePop = false">取 消</el-button>
          <el-button type="primary" @click="useSubmit">确 定</el-button>
        </div>
      </el-dialog>
		</div>
	</div>

</template>

<script>
  const shopping = {
    id: '',
    name: '',
    time: '',
    num: '',
    money: '',
    location: '',
    purchaser: '',
    note: ''
  }
  const use = {
    id: '',
    name: '',
    time: '',
    num: '',
    user: '',
    stock: '',
  }
	export default {
		data() {
			return {
			  id: '',
        info: {},
        ruleForm: {},
        width: '120px',
			  span: 18,
        pop: false,
        rules: {
          code: [
            { required: true, message: '请填写供应商编号', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请填写供应商名称', trigger: 'blur' }
          ]
        },
        list: [],
				shoppingPop: false,
				usePop: false,
				shopping: _g.cloneJson(shopping),
        shoppingRules: {
          name: [
            { required: true, message: '请填写采购物品名称', trigger: 'blur' }
          ],
        },
				useLog: _g.cloneJson(use),
        useRules: {
          name: [
            { required: true, message: '请填写使用物品名称', trigger: 'blur' }
          ],
        },
			}
		},

		created() {
      this.id = this.$route.params.id
      this.fetchData()
      this.getBuyList()
		},

		methods: {
      fetchData(){
        let data = {
          id: this.id
        }
        this.apiPost('Operation/supplierOtherDetail', data).then(res=>{
          this.info = res
          this.ruleForm = _g.cloneJson(res)
        })
      },
      supplierEdit(){
        this.pop = true
        this.ruleForm = _g.cloneJson(this.info)
      },
      submit(){
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.pop = false
            this.apiPost('Operation/supplierOtherEdit', this.ruleForm).then(res=>{
              let remind = res.error?'error':'success'
              _g.toastMsg(remind, res.msg)
              if(!res.error){
                this.fetchData()
              }else{
                this.pop = true
              }
            })
          } else {
            return false
          }
        });
      },
      tabChange(tab){
        let data = {
          id: this.id
        }
        this.apiPost('Operation/'+tab.name, data).then(res=>{
          this.list = res
        })
      },
      openAddBuy(){
        this.shoppingPop = true
        setTimeout(()=>{
          this.$refs.shopping.resetFields()
          this.shopping = _g.cloneJson(shopping)
        }, 0)
      },
      getBuyList(){
        let data = {
          id: this.id
        }
        this.apiPost('Operation/supplierOtherBuy', data).then(res=>{
          this.list = res
        })
      },
      shoppingSubmit(){
        this.$refs.shopping.validate((valid) => {
          if (valid) {
            this.shoppingPop = false
            this.shopping.supplierid = this.id
            this.apiPost('Operation/supplierOtherBuyEdit', this.shopping).then(res=>{
              let remind = res.error?'error':'success'
              _g.toastMsg(remind, res.msg)
              if(!res.error){
                this.getBuyList()
              }else{
                this.shoppingPop = true
              }
            })
          } else {
            return false
          }
        });
      },
      editBuy(id){
        let data = {
          id: id
        }
        this.apiPost('Operation/supplierOtherBuyDetail', data).then(res=>{
          this.shoppingPop = true
          setTimeout(() => {
            this.$refs.shopping.resetFields()
            this.shopping = res
          }, 0)

        })
      },
      delBuy(id){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: id
          }
          this.apiPost('Operation/supplierOtherBuyDelete', data).then(res=>{
            let remind = res.error?'error':'success'
            _g.toastMsg(remind, res.msg)
            if(!res.error){
              this.getBuyList()
            }
          })
        }).catch(() => {

        });
      },

      openAddUse(){
        this.usePop = true
        setTimeout(()=>{
          this.$refs.use.resetFields()
          this.use = _g.cloneJson(use)
        }, 0)
      },
      getUseList(){
        let data = {
          id: this.id
        }
        this.apiPost('Operation/supplierOtherUse', data).then(res=>{
          this.list = res
        })
      },
      useSubmit(){
        this.$refs.use.validate((valid) => {
          if (valid) {
            this.usePop = false
            this.useLog.supplierid = this.id
            this.apiPost('Operation/supplierOtherUseEdit', this.useLog).then(res=>{
              let remind = res.error?'error':'success'
              _g.toastMsg(remind, res.msg)
              if(!res.error){
                this.getUseList()
              }else{
                this.usePop = true
              }
            })
          } else {
            return false
          }
        });
      },
      editUse(id){
        let data = {
          id: id
        }
        this.apiPost('Operation/supplierOtherUseDetail', data).then(res=>{
          this.usePop = true
          setTimeout(() => {
            this.$refs.use.resetFields()
            this.useLog = res
          }, 0)

        })
      },
      delUse(id){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = {
            id: id
          }
          this.apiPost('Operation/supplierOtherUseDelete', data).then(res=>{
            let remind = res.error?'error':'success'
            _g.toastMsg(remind, res.msg)
            if(!res.error){
              this.getUseList()
            }
          })
        }).catch(() => {

        });
      },
		}
	}
</script>

<style scoped>
	.add {
		width: 25px;
		height: 25px;
		background: url(../../../img/add.png) no-repeat;
		background-size: 100%;
		cursor: pointer;
	}

</style>
